<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小餐桌 - 厨房</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/lucide.min.css" rel="stylesheet">
</head>
<body>
    <div class="device-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">9:41</div>
            <div class="status-bar-right">
                <span class="lucide-wifi"></span>
                <span class="lucide-battery"></span>
            </div>
        </div>
        
        <!-- 应用内容 -->
        <div class="app-container">
            <!-- 厨房信息 -->
            <div class="kitchen-header" style="position: relative; height: 180px; overflow: hidden; padding: 0;">
                <img src="https://images.unsplash.com/photo-1556911220-e15b29be8c8f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="厨房照片" style="width: 100%; height: 100%; object-fit: cover;">
                <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: white; padding: 20px;">
                    <h1 style="margin: 0; font-size: 24px;">我的甜蜜小厨</h1>
                    <p style="margin: 5px 0 0;">健康美味，从这里开始</p>
                </div>
            </div>
            
            <!-- 菜品列表 -->
            <div class="section-title">我的菜品</div>
            
            <div class="dish-container">
                <!-- 菜品1 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail.html'">
                    <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="蔬菜沙拉" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">蔬菜沙拉</div>
                        <div class="dish-description">新鲜蔬菜搭配特制沙拉酱</div>
                        <div class="dish-price">¥18</div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-heart"></span>
                        <span class="lucide-shopping-cart"></span>
                    </div>
                </div>
                
                <!-- 菜品2 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail.html'">
                    <img src="https://images.unsplash.com/photo-1512058564366-18510be2db19?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="红烧肉" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">红烧肉</div>
                        <div class="dish-description">传统美食，肥而不腻</div>
                        <div class="dish-price">¥36</div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-heart"></span>
                        <span class="lucide-shopping-cart"></span>
                    </div>
                </div>
                
                <!-- 菜品3 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail.html'">
                    <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="番茄炒蛋" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">番茄炒蛋</div>
                        <div class="dish-description">家常菜，酸甜可口</div>
                        <div class="dish-price">¥16</div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-heart"></span>
                        <span class="lucide-shopping-cart"></span>
                    </div>
                </div>
                
                <!-- 菜品4 -->
                <div class="card dish-card" onclick="window.location.href='dish-detail.html'">
                    <img src="https://images.unsplash.com/photo-1563379926898-05f4575a45d8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" alt="清蒸鱼" class="dish-image">
                    <div class="dish-info">
                        <div class="dish-title">清蒸鱼</div>
                        <div class="dish-description">新鲜鱼肉，原汁原味</div>
                        <div class="dish-price">¥48</div>
                    </div>
                    <div class="dish-actions">
                        <span class="lucide-heart"></span>
                        <span class="lucide-shopping-cart"></span>
                    </div>
                </div>
            </div>
            
            <!-- 添加菜品按钮 -->
            <div style="position: fixed; bottom: 80px; right: 20px;">
                <button class="button" style="width: 56px; height: 56px; border-radius: 28px; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 8px rgba(0,0,0,0.2);" onclick="showAddOptions()">
                    <span class="lucide-plus" style="font-size: 24px;"></span>
                </button>
            </div>
        </div>
        
        <!-- 底部导航栏 -->
        <div class="navbar">
            <a href="kitchen.html" class="nav-item active">
                <span class="lucide-chef-hat nav-icon"></span>
                <span>厨房</span>
            </a>
            <a href="mealplan.html" class="nav-item">
                <span class="lucide-calendar nav-icon"></span>
                <span>饮食计划</span>
            </a>
            <a href="discover.html" class="nav-item">
                <span class="lucide-compass nav-icon"></span>
                <span>发现</span>
            </a>
            <a href="profile.html" class="nav-item">
                <span class="lucide-user nav-icon"></span>
                <span>我的</span>
            </a>
        </div>
        
        <!-- 添加菜品选项模态框 -->
        <div id="addOptionsModal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">添加菜品</span>
                    <span class="modal-close" onclick="hideAddOptions()">&times;</span>
                </div>
                <div>
                    <button class="button" style="width: 100%; margin-bottom: 10px;" onclick="window.location.href='add-dish.html'">手动添加菜品</button>
                    <button class="button ghost" style="width: 100%;" onclick="alert('导入功能开发中...')">导入菜品</button>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        function showAddOptions() {
            document.getElementById('addOptionsModal').classList.remove('hidden');
        }
        
        function hideAddOptions() {
            document.getElementById('addOptionsModal').classList.add('hidden');
        }
    </script>
</body>
</html> 